<template>
  <div class="page-details">
    <c-title :hide="false" text="订单详情"></c-title>
    <div class="order-state-name">{{ goodsInfo.status_name }}</div>
    <div class="page-details-main">

      <div class="page-bg">
        <div class="header">

          <div class="order-item" v-for="item in goodsInfo.has_many_order_goods" :key="item.goods_id">
            <div class="card-wrap flex">
              <div class="img">
                <img :src="item.thumb" />
              </div>
              <div class="card-main flex">
                <div class="flex-j-sb ">
                  <div class="title ell">{{ item.title }}</div>
                  <div class="num">x{{ item.total }}</div>
                </div>
                <div class="flex-a-c attribute">¥{{ item.goods_price }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>



      <template v-if="code">
        <div class="border-line">
          <div class="border-line-left"></div>
          <div class="border-line-right"></div>
        </div>
        <div class="store-code">
          <img :src="code" alt="" />
          <div class="refresh" @click="refreshCode">刷新</div>
          <div class="store-code-tips">请将二维码展示给门店</div>
        </div>
      </template>

      <template v-if="code_list && code_list.length !== 0">
        <div class="border-line">
          <div class="border-line-left"></div>
          <div class="border-line-right"></div>
        </div>
        <div class="afterSale flex-j-sb flex-a-c">
          <div class="use-condition">
            <div class="use-condition-top">
              <div class="use-count" v-if="goodsInfo.goods.product_type==1||goodsInfo.goods.product_type==2||goodsInfo.goods.product_type==3">待使用（核销）{{ goodsInfo.code_count }}次</div>
              <div class="use-count" v-else>{{ goodsInfo.goods_count }}份可用{{ goodsInfo.code_count }}次</div>
              <div @click="onQrcode" class="flex-a-c">
                <span class="use-condition-tips">查看劵码</span>
                <div class="iconfont icon-advertise-next"></div>
              </div>
            </div>
            <div class="use-condition-bottom">{{ goodsInfo.expire_time }}后到期</div>
          </div>

        </div>
      </template>


    </div>
    <div class="shop" v-if="store && store.length !== 0">
      <div class="shop-title flex-j-sb ">
        <div class="title-name">适用门店</div>
        <div class="flex-a-c amount" @click="shopNavTo">{{ store.length }}家店适用<span
            class="iconfont icon-advertise-next"></span></div>
      </div>
      <address-us :storeItem="store[0]" :address="store[0] && store[0].address_detail"></address-us>
    </div>
    <div class="mb20"></div>
    <div v-if="is_show_component">
      <purchase-notes ref="purchase-notes" :goodsNotes="purchase" :goodsDetail="packages"
        :booking_rule="purchase.booking_rule">
      </purchase-notes>
    </div>

    <div class="mb20"></div>
    <div class="orderInfo">
      <div class="title">订单信息</div>

      <div class="flex-j-sb info-item">
        <div class="info-left">下单时间</div>
        <div class="info-right">{{ goodsInfo.create_time }}</div>
      </div>

      <div class="flex-j-sb info-item">
        <div class="info-left">购买份数</div>
        <div class="info-right">{{ goodsInfo.goods_total }}份</div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">订单金额</div>
        <div class="info-right">¥{{ goodsInfo.goods_price }}</div>
      </div>
      <template v-if="goodsInfo.order_discount && goodsInfo.order_discount.length !== 0">
        <div class="flex-j-sb info-item" v-for="item in goodsInfo.order_discount">
          <div class="info-left">{{ item.name }}</div>
          <div class="info-right">¥{{ item.amount }}</div>
        </div>
      </template>
      <div class="flex-j-sb info-item">
        <div class="info-left">实付金额</div>
        <div class="info-right">¥{{ goodsInfo.price }}</div>
      </div>

      <div class="info-pb">
        <div class="info-line"></div>
      </div>

      <div class="flex-j-sb info-item" v-if="goodsInfo.mobile">
        <div class="info-left">手机号</div>
        <div class="info-right">{{ goodsInfo.mobile }}</div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">订单号</div>
        <div class="info-right info-sn" v-clipboard:copy="goodsInfo.order_sn" v-clipboard:success="copyCode"
          v-clipboard:error="onError">
          {{ goodsInfo.order_sn }}
          <i class="iconfont icon-icon_combinatione"></i>
        </div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">支付方式</div>
        <div class="info-right">¥{{ goodsInfo.pay_type_name }}</div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">创建时间</div>
        <div class="info-right">¥{{ goodsInfo.create_time }}</div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">付款时间</div>
        <div class="info-right">¥{{ goodsInfo.pay_time }}</div>
      </div>
    </div>
    <div class="mb20"></div>
    <div class="kefu" @click="clickChat">
      <i class="iconfont icon-wodekefu" style="font-size: 1.25rem; color: #F15353;margin-right: .2188rem;"></i>
      <span class="kefu-tips">联系客服</span>
    </div>
    <div class="footer">
      <div class="footer-btn">
        <block v-for="(item, index) in goodsInfo.button_models" :key="index">
          <div :class="item.value === 1 ? 'order-buy' : 'order-buy-cancel'"
            @click="orderstateOn({ id: orderId, api: item.api, value: item.value })">
            {{ item.name }}
          </div>
        </block>
      </div>
      <!-- <block v-for="(item, index) in details.button_models" :key="index">
        <div class="evaluate-btn " v-if="item.value === 'coupon_store_comment'"
          @click="evaluateBtn(details.has_many_order_goods[0].title)">去评价</div>
      </block> -->
      <div class="mb10"></div>
    </div>
    <van-dialog id="van-dialog" />
    <div class="mb130"></div>
    <div class="mb130"></div>
    <!-- 客服 -->
    <!-- 客服end -->
    <van-popup position="bottom" v-model="orderShow" @close="onClose" round>
      <div class="qrcode-main">
        <div class="down" @click="onClose">
          <i class="iconfont icon-close11"></i>
        </div>
        <div class="title">详情</div>
        <div class="qrcode-list">
          <block v-for="(item, index) in couponList" :key="index">
            <div class="qrcode-item flex-a-c" v-if="!item.has_one_verify_detail" v-clipboard:copy="item.code"
              v-clipboard:success="copyCode" v-clipboard:error="onError">
              <div class="flex-a-c">
                <div class="ticket-sn">券码 {{ item.code }}</div>
                <div class="qrcode-copy">
                  <i class="iconfont icon-icon_combinatione"></i>
                </div>
              </div>
              <div class="use false">待使用</div>
            </div>
            <div class="qrcode-item-confirm" v-else>
              <div class="flex-a-c" style="justify-content: space-between;">
                <div class="ticket-sn">
                  券码 <span class="ticket-text">{{ item.code }}</span>
                </div>
                <div class="use true">已使用</div>
              </div>
              <div class="shop-name">消费门店：{{ item.has_one_verify_detail &&
                item.has_one_verify_detail.has_one_store && item.has_one_verify_detail.has_one_store.name }}</div>
              <div class="ticket-time">消费时间：{{ item.has_one_verify_detail && item.has_one_verify_detail.used_at }}</div>
            </div>
          </block>
        </div>
      </div>
    </van-popup>
    <yz-service v-model="serviceShow" :url="cservice" :mobile="serviceMobile" :qr="serviceQRcode"></yz-service>
  </div>
</template>
<script>
import orderDetails_controller from "./orderDetails_controller.js";
export default orderDetails_controller;
</script>
<style lang="scss" scoped>
::v-deep .van-popup {
  background-color: #F5F5F5;
}

.kefu {
  height: 2.75rem;
  background: #FFFFFF;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 .75rem;

}

.use-condition {
  text-align: left;
  line-height: 1;
  width: 100%;

  .use-count {
    font-weight: bold;
    font-size: 1rem;
    color: #00001C;
  }

  &-tips {
    font-weight: 400;
    font-size: .8125rem;
    color: #00001C;
  }

  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-bottom {
    font-weight: 400;
    font-size: .8125rem;
    color: #999999;
    margin-top: .5938rem;
  }
}

.order-state-name {
  font-size: 1.25rem;
  text-align: left;
  font-weight: bold;
  color: #000000;
  line-height: 1;
  margin: .9375rem .75rem .6875rem;
}

/* packageF/consumption/orderDetails/orderDetails.wxss */

.mb20 {
  height: 0.625rem;
  clear: both;
}

.mb10 {
  height: 0.3125rem;
  clear: both;
}

.mb120 {
  height: 7.5rem;
  clear: both;
}

.mb18 {
  height: 0.5625rem;
  clear: both;
}

.mb130 {
  height: 4.0625rem;
  clear: both;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: left;

  /* 定义显示的行数 */
  overflow: hidden;
}

.page-bg {
  // background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/details_bg.png");
  // background-size: 100% 70%;
  // background-repeat: no-repeat;
}

.header {}

.page-details .head-title {
  font-size: 1.4322rem;
  color: #fff;
  padding: 1.1875rem 0 1.0625rem 0;
  text-align: left;
}

.head-succees {
  padding: .9375rem 0 .6875rem;
  flex-direction: column;
  color: #000;

  .succees {
    font-size: 1.25rem;
    text-align: left;
    font-weight: bold;
    line-height: 1;
  }

  .prompt {
    font-size: 0.8125rem;
    margin: 0.625rem 0 0 0;
  }
}

.order-item {
  background-color: #fff;
  border-radius: 0.5rem;
  padding: .75rem .625rem;
  box-sizing: border-box;
}

.card-wrap {
  width: 100%;
}

.card-wrap .img {
  width: 4.625rem;
  height: 4.625rem;
  margin: 0 0.6875rem 0 0;

  img {
    width: 4.625rem;
    height: 4.625rem;
    border-radius: .5rem;
  }
}

.card-main {
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: .4688rem;

  .title {
    font-weight: 500;
    font-size: .9375rem;
    color: #00001C;
  }

  .num {
    margin-left: .75rem;
    font-size: .8125rem;
    font-weight: 400;
  }

  .attribute {
    font-weight: 500;
    font-size: .875rem;
    line-height: 1;
    color: #00001C;
  }
}



/* 显示扫二维码 */

.details-qrcode {
  background-color: #fff;
  border-radius: 0.3125rem;
  margin: 0 0.625rem;
  padding: 2rem 0 1.0625rem 0;
  flex-direction: column;

  .qrcode-img {
    width: 7.9688rem;
    height: 7.9688rem;

    img {
      width: 7.9688rem;
      height: 7.9688rem;
    }
  }

  .eqcode-title {
    text-align: center;
    font-size: 0.8125rem;
    color: #979797;
    margin: 2.5rem 0 0 0;
  }

  .eqcode-btn {
    background-image: linear-gradient(90deg, #ff9566 0%, #fb6d43 100%);
    border-radius: 0.3125rem;
    font-size: 0.9375rem;
    color: #fff;
    margin: 0.6875rem 0 0 0;
    padding: 0.6875rem 1.375rem 0.625rem 1.375rem;
  }
}

.apply-refund {
  margin: 0 0.625rem 0.9375rem 0.625rem;
  border-radius: 0.3125rem;
  background-color: #fff;
  align-items: flex-end;
  padding: 0.9375rem 0.8125rem 0.875rem 0.8125rem;

  .explain {
    font-size: 1rem;
    color: #31303d;
    cursor: pointer;
  }

  .expire-time {
    font-size: 0.75rem;
    color: #888;
    margin: 0.1563rem 0 0 0;
  }

  .refund-btn {
    width: 5rem;
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    border-radius: 0.125rem;
    font-size: 0.7813rem;
    color: #333;
    border: solid 0.0625rem #b5b5b5;
  }
}

.page-details-main {
  background-color: #fff;
  overflow: hidden;
  margin: 0 .75rem .625rem;
  border-radius: .5rem;
}

.afterSale {
  background-color: #fff;
  padding: 0.625rem;
}

.border-line {
  height: .625rem;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    top: 50%;
    border-top: .125rem dotted #F5F5F5;
    transform: translateY(-50%);
  }

  &-left {
    position: absolute;
    left: 0;
    width: .625rem;
    height: .625rem;
    background: #F5F5F5;
    border-radius: 100%;
    transform: translateX(-50%);

  }

  &-right {
    position: absolute;
    right: 0;
    width: .625rem;
    height: .625rem;
    background: #F5F5F5;
    border-radius: 100%;
    transform: translateX(50%);

  }
}

.afterSale-title {
  font-size: 0.875rem;
}

.hint {
  margin: 0 1.375rem 0.9375rem 1.375rem;
  font-size: 0.7813rem;
  line-height: 1.375rem;
  color: #888;
  text-align: left;

  .img {
    width: 0.8125rem;
    height: 0.8125rem;
    margin: 0.1875rem 0.3125rem 0 0;
  }

  img {
    width: 0.8125rem;
    height: 0.8125rem;
    margin: 0 0.1563rem 0 0;
  }
}

/* 门店位置信息 */

.shop {
  margin: 0 0.625rem;
  background-color: #fff;
  padding: 0.75rem 0.8125rem 0.8125rem 0.6875rem;
  border-radius: 0.3125rem;
}

.shop-title {
  margin: 0 0 0.9375rem 0;

  .title-name {
    font-size: 1.0625rem;
    color: #222;
  }

  .amount {
    font-size: 0.75rem;
    color: #979797;
  }
}

/* 订单信息 */

.orderInfo {
  padding: 0.75rem 0.625rem 1.6563rem 0.625rem;
  margin: 0 0.625rem;
  border-radius: 0.3125rem;
  background-color: #fff;

  .title {
    font-size: 1.0625rem;
    color: #222;
    margin: 0 0 1.4063rem 0;
    text-align: left;
  }
}

.info-sn {
  cursor: pointer;
}

.info-right .copy {
  width: 0.7188rem;
  height: 0.7188rem;
  margin-left: 0.4063rem;
}

.info-item {
  font-size: 0.9375rem;
  margin: 0 0 1.0313rem 0;
}

.orderInfo {
  .left {
    color: #555;
  }

  .right {
    color: #222;
  }

  .info-pb {
    padding: 0 0.3125rem;
    margin: 0 0 1.0938rem 0;
  }
}

.info-pb .info-line {
  width: 100%;
  height: 0.0625rem;
  background-color: #cfcfcf;
}

.kefu-tips {
  font-weight: 400;
  font-size: .8125rem;
  color: #00001C;
}

.store-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.125rem;
  margin-bottom: 1.125rem;

  img {
    width: 7.5rem;
    height: 7.5rem;

  }

  .refresh {
    width: 3.5313rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-top: .625rem;
    background: #F0F0F1;
    font-weight: 400;
    font-size: .75rem;
    color: #6E6E79;
    border-radius: .8438rem;
  }

  &-tips {
    margin-top: .5625rem;
    color: #999;
    font-size: .75rem;
    line-height: 1;
  }
}

.footer-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: .625rem .8125rem;

  .order-buy-cancel {
    width: 4.8125rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
    border: .0313rem solid #AAAAB3;
    font-weight: 400;
    font-size: .8125rem;
    color: #00001C;
  }

  .order-buy {
    width: 4.8125rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background: #F15353;
    border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
    font-weight: 400;
    font-size: .8125rem;
    color: #FFFFFF;
    border: unset !important;
  }

  &-current {
    background: #F15353;
    color: #fff !important;
    border: unset !important;

  }

  div {
    min-width: 4.8125rem;
    height: 1.625rem;
    line-height: 1.625rem;
    border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
    box-sizing: border-box;
    font-weight: 400;
    font-size: .8125rem;
    color: #00001C;
    margin-left: .5rem;
    border: 1px solid #AAAAB3;
  }
}

.footer {
  // width: 100%;
  width: 23.4375rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
}

.footer-service {
  padding: 0.875rem 1.7188rem 0.9375rem 1.4688rem;
}

.footer {
  .service {
    .icon-fontclass-kefu {
      font-size: 1.375rem;
    }

    .name {
      font-size: 0.75rem;
      color: #222;
    }
  }

  .price-total {
    font-size: 0.75rem;
    color: #555;
    align-items: flex-end;
  }
}

.price-total .title {
  margin-bottom: 0.4375rem;
}

.footer .price-total .price {
  color: #ff3a00;
  font-size: 0.9375rem;
  margin: 0 0 0 0.4688rem;
}

.price-total .number {
  font-size: 1.5625rem;
}

.footer .evaluate-btn {
  width: 21.875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  margin: 1.5625rem auto 0.3125rem auto;
  text-align: center;
  background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
  border-radius: 0.3125rem;
  font-size: 0.9375rem;
  color: #fff;
}

/* 券码弹窗 */

.qrcode-main {
  padding: 1.375rem .75rem 1.25rem;
  position: relative;

  .title {
    font-weight: bold;
    font-size: 1rem;
    text-align: left;
    line-height: 1;
    color: #00001C;
    margin-bottom: .9375rem;
  }
  .down .icon-close11{
    font-size: .75rem;
  }
  .down {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    text-align: center;
    line-height: 1.5rem;
    background: #F0F0F1;
    top: 0.9375rem;
    right: 0.9375rem;
    border-radius: 50%;
  }

  .qrcode-item {
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
  }
}

.qrcode-item .ticket-sn,
.qrcode-item-confirm .ticket-sn {
  font-weight: 500;
  font-size: .9375rem;
  color: #00001C;
}

.ticket-sn .ticket-text {
  text-decoration: line-through;
}

.qrcode-item {
  .qrcode-copy {
    width: 0.8125rem;
    height: 0.75rem;
    margin-left: .4375rem;

    img {
      width: 0.8125rem;
      height: 0.75rem;
    }
  }

  .use {
    width: 2.5rem;
    height: 1.0625rem;
    line-height: 1.0625rem;
    text-align: center;
    font-size: 0.625rem;
    border-radius: 8rpx;
    margin: 0 0.4375rem 0 1.0625rem;
  }
}

.qrcode-item-confirm .use {
  width: 2.5rem;
  height: 1.125rem;
  line-height: 1.125rem;
  text-align: center;
  font-size: 0.625rem;
  background-color: #e2e2e2;
  border-radius: .3125rem;
  margin-right: .625rem;
}

.false {
  background-color: #FFF0E8;
  font-weight: 400;
  font-size: .6875rem;
  color: #F96D20;
}

.true {
  color: #6E6E79;
  background-color: #F0F0F1;

}

.qrcode-item {
  margin: 0 0 0.625rem 0;
  padding: 1.1563rem 0.6875rem 1.1563rem 0.6875rem;
  background-color: #fff;
  border-radius: .5rem;
  justify-content: space-between !important;
}

.qrcode-item-confirm {
  margin: 0 0 0.625rem 0;
  padding: 1.1563rem 0.6875rem 1.1563rem 0.6875rem;
  border-radius: 0.5rem;
  background-color: #fff;

  .shop-name {
    font-size: .8125rem;
    color: #6E6E79;
    text-align: left;
    margin: 0.625rem 0 0 0;
  }

  .ticket-time {
    font-size: .8125rem;
    color: #6E6E79;
    margin: 0.625rem 0 0 0;
    text-align: left;
  }
}

.payment-btn {
  margin: 0 0.625rem 0.625rem 0.625rem;

  .btn {
    width: 10.5rem;
    height: 2.0625rem;
    line-height: 2.125rem;
    text-align: center;
    border-radius: 0.3125rem;
    border: solid 0.0313rem #b3b3b3;
    font-size: 0.8125rem;
    color: #222;
    margin: 0 0.375rem 0 0;
  }

  .pay {
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.8125rem;
    color: #fff;
  }
}

.qrcode-list {
  height: 18.75rem;
  overflow-y: auto;
}

.service {
  position: relative;

  .service-btn {
    position: absolute;
    width: 1.1875rem;
    height: 3.75rem;
    background-color: transparent;
    border: none;
    z-index: 5;

    &::after {
      border: none;
    }
  }
}

.pop-content {
  background-color: #fff;
  border-radius: 1.1875rem;
  text-align: center;
  background: #fff;
  padding: 1.0938rem 0;
  position: relative;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20.3125rem;

  .pop-top {
    display: flex;
    justify-content: space-between;
    width: 100%;

    /* flex-wrap: wrap; */

    .left {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      margin-bottom: 0.75rem;

      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;

        .image {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      margin-bottom: 0.75rem;

      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;

        .image {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
        }

        icon {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
          border-radius: 50%;
          overflow: hidden;
          font-size: 1.5625rem;
          background-color: #02c777;
          color: #fff;
        }

        .color2 {
          background: #ff9329;
        }

        .color3 {
          background: #2aa7fb;
        }

        .image image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .line {
    width: 2rpx;
    height: 1.5938rem;
    background-color: #999;
  }
}
</style>
